<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container">
			<ul id="fruits">
				<!-- javaScript:void(0)
				 阻止a标签默认行为
				 -->
				<!-- <li>苹果<a href="javaScript:void(0)">x</a></li>
				<li>香蕉<a href="javaScript:void(0)">x</a></li>
				<li>火龙果<a href="javaScript:void(0)">x</a></li>
				<li>西瓜<a href="javaScript:void(0)">x</a></li> -->
				<li>苹果<a href="">x</a></li>
				<li>香蕉<a href="">x</a></li>
				<li>火龙果<a href="">x</a></li>
				<li>西瓜<a href="">x</a></li>
			</ul>
			<input  id = 'in' type="text" name="fruit"/>
			<input id="ok" type="button" value="确定" />
		</div>
		<script >
			//该标签文本 textContent/innerHTML
			//标签属性 image.src/image.title/image.style
			//
			const ul = document.querySelector("#fruits")
			var anchors = document.querySelectorAll('#fruits>li>a')
			for (let i = 0; i < anchors.length; i++) {
				anchors[i].addEventListener('click', (evt) => {
					evt.preventDefault()
				ul.removeChild(anchors[i].parentNode)
				})
			}
			 const input = document.querySelector('#fruits+input')
			 const ok = document.querySelector('#ok')
			 ok.addEventListener('click', () => {
				let name =  input.value.trim()
				if(name.length > 0){
				 let li = document.createElement('li')
					li.textContent = name
					// ul.appendChild(li)
					ul.insertBefore(li,ul.firstChild)
					// blur失去焦点
					input.value = ''
					input.focus()
				}
				else{
					window.alert('haha')
				}
			 })
			 input.addEventListener('keypress',(evt) => {
				 if (evt.keyCode == 13){
					 let name =  input.value.trim()
					 if(name.length > 0){
					  let li = document.createElement('li')
					 	li.textContent = name
					 	// ul.appendChild(li)
					 	ul.insertBefore(li,ul.firstChild)
					 	// blur失去焦点
					 	input.value = ''
					 	input.focus()
				 }
			 }}
			 )
			// anchors.forEach(delAnchor => {
			// 	delAnchor.addEventListener('click',()=> {
			// 	ul.removeChild(delAnchor.parentNode)
			// 	})
			// })
		</script>
	</body>
</html>